<comment>
  # 1.安装echarts  npm install echarts --save
  # 2.在main.js引入echarts
    import echarts from 'echarts'
    Vue.prototype.$echarts = echarts
</comment>
<template>
  <div class="content">
    <div ref="charts" :style="{width: width, height: height}"></div>
  </div>
</template>


<script>
import * as echarts from "echarts";

import {getMap, getLineStatus} from "@/utils/mapUtil";

export default {
  name: 'index',
  props:{
    height:{
      type: String,
      default: '200px'
    },
    width:{
      type: String,
      default: '200px'
    },
    backGroundColor:{
      type: String,
      default: '#404a59'
    },
  },
  data(){
    return{
      currentMapName:'',
      coords: [],
      linesCoords: [],
      linesColor:{
        success: '#58cc8a',
        fail: '#ff4141'
      },
      displayLabel:['北京市','黑龙江省','内蒙古自治区','新疆维吾尔自治区','江苏省','青海省','云南省','广东省','四川省','辽宁省','西藏自治区']
    }
  },
  created () {
    this.$nextTick(() => {
      this.initCharts();
    })
  },
  methods: {
    initCharts() {
      const charts = echarts.init(this.$refs["charts"]);
      const option = {
        title:{
          text: '全国各地网络中心连接状态',
          subtext: '数据纯属虚构',
          padding: [15, 15],
          textStyle: {
            fontFamily: '宋体',
            fontSize: 16,
            fontWeight: 'normal',
            color: '#fff'
          }
        },
        // 背景颜色
        backgroundColor: this.backGroundColor,
        // 提示浮窗样式
        tooltip: {
          show: true,
          trigger: "item",
          alwaysShowContent: false,
          backgroundColor: "#0C121C",
          borderColor: "rgba(0, 0, 0, 0.16);",
          hideDelay: 100,
          triggerOn: "mousemove",
          enterable: true,
          textStyle: {
            color: "#DADADA",
            fontSize: "12",
            width: 20,
            height: 30,
            overflow: "break",
          },
          showDelay: 100,
          formatter:function(params){
            const mapLines = getLineStatus(params.data.mapName)
            const data = mapLines.filter(item => {
              return item.lineName == params.data.mapLineName
            })
            return params.data.mapLineName +'  ' + data[0].lineInfos
          },
        },
        // 地图配置
        geo: {
          map: "china",
          zoom: 1.2,
          roam: true,
          label: {
            // 通常状态下的样式
            normal: {
              // show: true,  // 在地图上显示标签
              textStyle: {
                color: "#fff",
              },
            },
            // 鼠标放上去的样式
            emphasis: {
              textStyle: {
                color: "#fff",
              },
            },
          },
          // 地图区域的样式设置
          itemStyle: {
            normal: {
              borderColor: "rgba(147, 235, 248, 1)",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
              shadowColor: "rgba(128, 217, 248, 1)",
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10,
            },
            // 鼠标放上去高亮的样式
            emphasis: {
              areaColor: "#389BB7",
              borderWidth: 0,
            },
          },
        },
        series: [
          {
            name: "地点",
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 2,
            rippleEffect: {
              brushType: "stroke",
            },
            label: {
              normal: {
                // show: true,
                formatter: "{b}",
                position: "right",
                textStyle: {
                  color: "#fff",
                  fontSize: 9,
                },
              },
            },
            symbolSize: 8,
            showEffectOn: "render",
            itemStyle: {
              normal: {
                color: "#46bee9",
              },
            },
            data: [],
          },
          {
            type: "lines",
            coordinateSystem: "geo",
            zlevel: 15,

            effect: {
              show: true,
              constantSpeed: 30,
              symbol: "pin",
              symbolSize: 3,
              trailLength: 0,
            },
            data: [],
          },
        ],
      };
      // 地图注册，第一个参数的名字必须和option.geo.map一致
      const [mapName, realName, mapJson] = getMap();
      this.currentMapName = mapName
      this.formatterMapData(realName)
      option.geo.map = mapName;
      option.series[0].data = this.coords
      option.series[1].data = this.linesCoords
      echarts.registerMap(mapName,mapJson)
      charts.setOption(option);

      // 注意这里是echarts的实例对象，而不是echarts组件本身
      //click 单击   dblclick 双击
      charts.on('click', ({name}) => {
        // name不存在时不重新渲染；name为台湾省时，不让其下钻
        if(name && name != '台湾省'){
          const [mapName, realName, mapJson] = getMap(name);
          this.currentMapName = mapName
          this.formatterMapData(realName)
          option.title.text = realName == 'china' ? '全国各地网络中心连接状态' : realName + '各地网络中心连接状态'
          option.series[0].data = this.coords
          option.series[1].data = this.linesCoords
          option.geo.zoom = 1.2
          option.geo.map = mapName
          echarts.registerMap(mapName, mapJson)
          // 重新渲染
          charts.setOption(option, true)
        }
      })
    },
    formatterMapData(mapName){
      this.coords = []
      this.linesCoords = []
      const mapLines = getLineStatus(mapName)
      var nodeColor = ''
      // 需求：
      // 1、地图初始化时，节点与节点之间连线均为正常状态（绿色）,节点颜色为绿色
      // 2、节点与节点之间连接中断时，连线为红色，鼠标悬浮在连线上显示中断信息
      // 3、当第二层有节点间状态为中断时，第一层节点颜色为红色
      mapLines.forEach((v, index) => {
        var randData = 0
        var haveName = false
        //第一层节点显示由数组  displayLabel 决定， 第二层取其3的倍数显示对应节点
        if(mapName == 'china'){
          haveName = this.displayLabel.indexOf(v.name) > -1
        }else{
          randData = index % 3 == 0
        }
        if( haveName || randData > 0 || index == 0){
          // 第一层节点颜色，需判断对应的第二层节点间的状态；第二层节点颜色均为绿色
          if(this.currentMapName == 'china'){
            const data = getLineStatus(v.name)
            var res = data.some(item =>{ return item.lineStatus == 'fail' })
            if(res){
              nodeColor = '#ff4141'
            }else{
              nodeColor = "#58f59c"
            }
          }else{
            nodeColor = "#58f59c"
          }
          this.coords.push({
            name: v.name,
            value: v.value,
            label: {
              show: true,  // 在地图上显示标签
            },
            symbolSize: 6,
            itemStyle: {
              normal: {
                color: nodeColor,
              },
            },
          })
          let varColor = this.linesColor[v.lineStatus]
          index > 0 &&
          this.linesCoords.push({
            coords: v.coord,
            mapLineName: v.lineName,
            mapName: mapName,
            lineStyle: {
              normal: {
                color: varColor,
                width: 2,
                opacity: 0.4,
                curveness: 0.6,
              },
            },
          });
        }
      });
    },
  },
};
</script>

